<template>
    <div class="mainBoxCon">
        
        <div class="header">
            <van-nav-bar title="全年免疫活动" left-arrow @click-left="back" />
        </div>
        <!-- <div class="searchBox">
            <div @click='back' class="backBtn">
                <img class='backIcon' src="../../assets/greater.png" alt>
            </div>
            <div class="navTit">全年免疫活动</div>
            <div></div>
        </div> -->
        <!-- 主体区域 -->
        <div class="mainBox">
            <img src="../../assets/active/bg.png" class="mainBg" alt="">
            <div class="mainTop">
                <span>签到立减</span>
                <span @click="showRuleHandle(1)">活动规则</span>
            </div>
            <div class="couponBox" @click="buyHandle(2)" v-if="coupon == 0 && userInfo.isCoupon != 0">
                <img src="../../assets/active/couponLeft.png" class="couponLeft" alt="">
                <img src="../../assets/active/couponRight.png" alt="" class="couponRight">
                <div class="couponMain">
                    <div>
                        <div>
                            ￥<span>1828</span>
                        </div>
                        <span>指定商品</span>
                    </div>
                    <div>
                        <span>中汇肽谷 鸡胚肽</span>
                        <div>
                            <span>{{ coupon == 1 ? '已过期' : '待使用' }}</span>
                            剩余有效时间：{{ couponResDay }}天
                        </div>
                    </div>
                </div>
            </div>
            <div class="topBox" @click="buyHandle(1)" v-else>
            </div>


            <div class="activeBox">
                <div class="activeTitle">专属任务</div>
                <div class="timeBox">
                    <div :class="item.dateTime != '' || item.isToday ? 'timeItem activeTimeItem' : 'timeItem'"
                        v-for="(item, index) in detailList" :key="index" v-if="index < 6">
                        <span>
                            {{ item.dateTime != '' ? item.dateTime : '第' + (index + 1) + '天' }}
                        </span>
                        <template v-if="!item.isToday">
                            <img src="../../assets/active/fragment1.png" alt="" v-if="item.dateTime == ''">
                            <img src="../../assets/active/fragment2.png" alt="" v-else>
                        </template>
                        <span class="shijianBox" v-else>{{ todayInfo.list.length }}/5</span>
                        <span>
                            <template v-if="item.dateTime == '' && !item.isToday">
                                未完成
                            </template>
                            <template v-if="item.dateTime == '' && item.isToday">
                                {{ todayInfo.list.length == 5 ? '已完成' : '进行中' }}
                            </template>
                            <template v-if="item.dateTime != ''">
                                已完成
                            </template>
                        </span>
                    </div>

                    <div
                        :class="detailList[6].dateTime != '' || detailList[6].isToday ? 'lastBox activeLastBox' : 'lastBox'">
                        <span> {{ detailList[6].dateTime != '' ? detailList[6].dateTime : '第7天' }}</span>

                        <template v-if="!detailList[6].isToday">
                            <span>{{ detailList[6].dateTime != '' ? '已完成' : '未完成' }}</span>
                            <span>累计7天获</span>
                            <span>得完整优惠券</span>
                        </template>

                        <span class="shijianBox" v-else>{{ todayInfo.list.length }}/5</span>

                        <img src="../../assets/active/coupon1.png" v-if="detailList[6].dateTime == ''" alt="">
                        <img src="../../assets/active/coupon2.png" alt="" v-else>
                    </div>
                </div>


                <div class="activeLine" v-for="(item, index) in taskList" :key="index">
                    <div class="imgBox">
                        <img src='../../assets/active/1.png' v-if="index == 0" alt="">
                        <img src='../../assets/active/2.png' v-else-if="index == 1" alt="">
                        <img src='../../assets/active/3.png' v-else-if="index == 2" alt="">
                        <img src='../../assets/active/4.png' v-else-if="index == 3" alt="">
                        <img src='../../assets/active/5.png' v-else-if="index == 4" alt="">
                    </div>
                    <div class="rightBox">
                        <div>
                            <span>{{ item.name }}</span>
                            <span>{{ item.detail }}</span>
                        </div>
                        <div :class="!item.isFinish ? 'finishBtn' : ''"
                            @click="toFinishHandle(item.status, item.isFinish, index)">
                            {{ item.isFinish ? '已完成' :
                isBuyProduct ? item.text : '待解锁' }}</div>
                    </div>
                </div>
            </div>
        </div>

        <van-popup class="indextop" v-model="ruleShow" position="bottom" round>
            <div class="ruleBox">
                <!-- <div>活动规则</div> -->
                <div class="ruleMain" v-html="rules"></div>
                <div class="bottomBtnBox" v-if="showFlag == 2">
                    <div @click="buyHandle(1)">去购买</div>
                    <div @click="ruleShow = false">再想想</div>
                </div>
            </div>
        </van-popup>
    </div>

</template>

<script>

import { listActMain, addCoupon } from '../../network/recharge'
import { getRuleList, addActDetail } from '../../network/active'
export default {
    name: 'HomeR',
    data() {
        return {
            taskList: [
                {
                    name: '签到',
                    detail: '每日签到',
                    status: 1,
                    isFinish: false,
                    text: '签到'

                },
                {
                    name: '浏览文章15秒',
                    detail: '浏览任意一篇文章15秒',
                    status: 2,
                    isFinish: false,
                    text: '去完成'
                },
                {
                    name: '转发文章',
                    detail: '转发任意一篇文章',
                    status: 3,
                    isFinish: false,
                    text: '去完成'
                },
                {
                    name: '浏览视频15秒',
                    detail: '浏览任意一条视频15秒',
                    status: 4,
                    isFinish: false,
                    text: '去完成'
                },
                {
                    name: '转发视频',
                    detail: '转发任意一条视频',
                    status: 5,
                    isFinish: false,
                    text: '去完成'
                }
            ],
            todayIsShare: false,
            todayInfo: '',
            todayIsFinish: 0,
            userInfo: {
                isCoupon: 0
            },
            detailList: [],

            isBuyProduct: false,
            coupon: 0,//优惠券

            couponResDay: 0,
            ruleShow: false,
            rules: '',

            showFlag: 1,// 1 点击规则   2 点击待解锁


        }
    },
    mounted() {

    },
    methods: {

        showRuleHandle(flag) {
            this.showFlag = flag
            this.ruleShow = true
        },

        // 购买
        buyHandle(flag) {
            // 买商品
            if (flag == 2 && this.coupon == 1) {
                this.$toast('您的优惠券已过期')
            }
            localStorage.product_id = 2134
            this.$router.push('/detail')
            console.log('买商品');
        },

        // 完成任务
        toFinishHandle(status, isFinish, index) {


            if (!this.isBuyProduct) {
                this.showFlag = 2
                this.ruleShow = true
                return
            }

            if (isFinish) {
                this.$toast('任务已完成')
                return
            }
            if (status == 1) {
                // 签到
                this.checkTodayActive(1, index)
            } else if (status == 2 || status == 3) {
                // 文章
                localStorage.isShowLuntan = "";
                localStorage.topic = 0;
                localStorage.isPigTopicTask = status;
                this.$router.push('/forumKonwledge')

            } else if (status == 4 || status == 5) {
                localStorage.isPigTopicTask = status;
                this.$router.push('/videoDetail')

            }
        },


        checkTodayActive(flag, index) {
            this.todayInfo.list.push(flag)

            this.$toast('签到成功')
            this.taskList[index].isFinish = true

            localStorage.shopActiveInfo = JSON.stringify(this.todayInfo)

            if (this.todayInfo.list.length == 5 && this.todayIsFinish == 0) {
                this.finishRequest()
            }
        },

        finishRequest() {

            addActDetail({
                userId: localStorage.userId,
                dayNum: this.userInfo.currDay + 1
            }).then(res => {
                if (res.flag) {
                    if (res.data.isCoupon != 0) {
                        this.$dialog.alert({
                            title: '恭喜',
                            message: '您获得一张商品优惠券',
                            theme: 'round-button',
                            confirmButtonText: '立即领取'
                        })
                            .then(function () {
                                this.getMyCoupon()
                            })
                        this.userInfo.isCoupon = res.data.isCoupon
                    }
                    this.userInfo.currDay = this.userInfo.currDay + 1
                    this.$toast('恭喜您已完成今日全部任务')
                    this.todayIsFinish = 1
                    localStorage.todayIsFinish = 1
                }
            })


        },

        getMyCoupon() {
            addCoupon({
                userId: localStorage.userId,
            }).then(res => {
                if (res.flag) {
                    this.userInfo.isCoupon = res.data.coupon
                    this.$toast('领取成功')
                }
            })

        },
        DateDiff(sDate1, sDate2) {
            var aDate, oDate1, oDate2, iDays;
            aDate = sDate1.split("-");
            oDate1 = new Date(aDate[1] + "," + aDate[2] + "," + aDate[0]);
            aDate = sDate2.split("-");
            oDate2 = new Date(aDate[1] + "," + aDate[2] + "," + aDate[0]);
            //把相差的毫秒数转换为天数 
            iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24);
            return iDays;
        },



        getData() {

            // 判断今日是否已完成，并发送请求
            this.todayIsFinish = localStorage.todayIsFinish || 0
            if (localStorage.shopActiveInfo) {
                var obj = JSON.parse(localStorage.shopActiveInfo)
                if (obj.time == this.getNowDate()) {
                    this.todayInfo = JSON.parse(localStorage.shopActiveInfo)
                    this.taskList.forEach(item => {
                        item.isFinish = this.todayInfo.list.findIndex(x => x === (item.status)) != -1
                    })
                } else {
                    this.todayInfo = {
                        time: this.getNowDate(),
                        list: []
                    }
                    localStorage.todayIsFinish = 0
                }
            } else {
                this.todayInfo = {
                    time: this.getNowDate(),
                    list: []
                }
            }



            console.log(this.todayInfo);
            console.log(this.todayIsFinish);


            listActMain({
                userId: localStorage.userId
            }).then(res => {
                if (res.flag) {

                    this.coupon = res.data.coupon

                    if (res.data.coupon == 1) {
                        this.$dialog.alert({
                            title: '提示',
                            message: '您的商品优惠券已过期',
                            theme: 'round-button',
                            confirmButtonText: '我已知道'
                        })
                            .then(function () {
                            })
                    }

                    // 计算优惠券剩余时间
                    if (res.data.act.invaildTime) {
                        this.couponResDay = this.DateDiff(this.getNowDate(), res.data.act.invaildTime.split(' ')[0])
                    }
                    console.log(this.couponResDay);

                    this.userInfo = res.data.act
                    // 判断是否已购买
                    this.isBuyProduct = res.data.act.isFirst
                    // this.isBuyProduct = 1
                    if (this.todayInfo.list.length == 5 && this.todayIsFinish == 0) {
                        this.finishRequest()
                    }

                    console.log(this.detailList);
                    var time = this.getNowDate()
                    console.log(res.data.detail);
                    // res.data.detail = res.data.detail.splice(0, 7)
                    if (this.isBuyProduct) {
                        res.data.detail.forEach((ele, index) => {
                            var arr = ele.dateTime.split(' ')[0].split('-')
                            ele.isToday = time == ele.dateTime.split(' ')[0]
                            ele.dateTime = arr[1] + '-' + arr[2]
                            this.detailList[index] = ele
                        })
                        console.log(this.detailList);
                        if (res.data.detail.length < 7) {
                            this.detailList[res.data.detail.length].isToday = true
                        }
                    } else {
                        this.taskList.forEach(item => {
                            item.isFinish = false
                        })
                    }
                    if (res.data.act.currDay >= 7) {
                        this.taskList.forEach(item => {
                            item.isFinish = true
                        })
                    }

                }
            })

        },
        back() {
            this.$router.go(-1)
        },


        getNowDate() {
            var myDate = new Date;
            var year = myDate.getFullYear();
            var mon = myDate.getMonth() + 1;
            mon = mon < 10 ? '0' + mon : mon
            var date = myDate.getDate();
            date = date < 10 ? '0' + date : date
            var date1 = myDate.getDate() + 1;
            date1 = date1 < 10 ? '0' + date1 : date1
            var hours = myDate.getHours();
            hours = hours < 10 ? '0' + hours : hours
            var minutes = myDate.getMinutes();
            minutes = minutes < 10 ? '0' + minutes : minutes
            var seconds = myDate.getSeconds();
            seconds = seconds < 10 ? '0' + seconds : seconds
            return year + "-" + mon + "-" + date

        },
        getRule() {
            getRuleList().then(res => {
                if (res.flag) {
                    res.data.forEach(ele => {
                        if (ele.ruleFlag == 1) {
                            this.rules = ele.ruleContent
                        }
                    })
                }
            })

        },





    },
    created() {
        for (var i = 0; i < 7; i++) {
            console.log(i);
            this.detailList.push({
                dateTime: "",
                userId: '',
                isToday: false
            })
        }
        console.log(this.detailList);


        this.getData()
        this.getRule()
    },
    //计算属性
    computed: {

    },
    filters: {

    }

}

</script>

<style lang='less' scoped>
* {
    margin: 0;
    padding: 0;
}

body,
.mainBoxCon {

    width: 100%;
    /* height: 100vh; */
    background: linear-gradient(0deg, #678EFE, #9DB4FE);
    overflow-y: scroll;
}

.dis {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.backBtn {
    margin-left: 30px;
    display: flex;
    align-items: center;
}

.backIcon {
    font-size: 39.9975px;
    width: 36px;
    height: 36px;
}

.searchBox {
    position: fixed;
    top: 0;
    margin: 0 auto;
    padding-top: 63.9975px;
    width: 100%;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    z-index: 99;
    box-shadow: 0 .0133rem .08rem #ccc;
}

.navTit {
    margin-left: -60px;
    font-size: 36px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



.mainBox {
    position: relative;
    padding-top: 39.9975px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    margin: 90px auto 120px;
    width: 750px;

}

.mainBg {
    position: absolute;
    top: 0px;
    width: 750px;
    height: 588px;
}

.mainTop {
    position: relative;
    box-sizing: border-box;
    padding: 39.9975px 30px 0px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 48px;
    color: #FFFFFF;
    z-index: 10;
}

.mainTop>span:last-child {
    font-weight: 400;
    font-size: 36px;
    color: #F8D18B !important;
    text-decoration: underline;
    font-weight: 600;
}


.topBox {
    position: relative;
    margin-top: 44.0025px;
    width: 708.9975px;
    height: 183.9975px;
    /* background-color: aqua; */
    background-image: url(../../assets/active/topCon.png);
    background-size: 100% 100%;
}

.proImg {
    position: absolute;
    top: 54px;
    left: 54px;
    width: 144px;
    height: 105.9975px;
}

.proName {
    position: absolute;
    top: 69.9975px;
    left: 210px;
    width: 294px;
    height: 44.0025px;
}

.buyBtn {
    position: absolute;
    top: 129.9975px;
    left: 150px;
    width: 296.0025px;
    height: 45.9975px;
    transform: scale(.5);
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    -ms-transform: scale(.5);
    -o-transform: scale(.5);
}

.activeBox {
    margin-top: 39.9975px;
    width: 690px;
    /* height: 1226.0025px; */
    background: #FFFFFF;
    border-radius: 39.9975px;
}

.activeTitle {
    box-sizing: border-box;
    padding: 44.0025px;
    width: 100%;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 27.9975px;
    color: #38465D;

}

.timeBox {
    box-sizing: border-box;
    padding: 0 44.0025px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.timeItem {
    box-sizing: border-box;
    margin-bottom: 39.9975px;
    padding: 20.0025px 0 15.9975px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 129.9975px;
    height: 165.9975px;
    background: #F5F7FB;
    border-radius: 20.0025px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #35414F;
}

.timeItem>span:last-child {
    font-weight: bold;
    font-size: 20.0025px;
    color: #AFB2BE;
}

.activeTimeItem {
    background: linear-gradient(0deg, #678EFE, #9DB4FE);
    box-shadow: 0px 2.0025px 9px 0px rgba(119, 152, 255, 0.49);
    color: #FFFFFF;
}

.activeTimeItem>span:last-child {
    color: #FFFFFF;
}

.timeItem>img {
    /* margin: 12px 0 15.9975px; */
    width: 69.9975px;
    height: 69.9975px;
    /* box-shadow: 0px 5.0025px 8.0025px 0px rgba(12, 16, 23, 0.15); */
}

.shijianBox {
    /* margin: 12px 0 15.9975px; */
    width: 66px;
    height: 60px;
    font-family: Source Han Sans CN;
    font-weight: bold !important;
    font-size: 42px !important;
    color: #FFFFFF;
}

.lastBox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20.0025px 9.9975px 18px 30px;
    position: relative;
    width: 288px;
    height: 165.9975px;
    background: #F5F7FB;
    border-radius: 20.0025px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 27.9975px;
    color: #35414F;
}

.lastBox>span:nth-child(2) {
    font-weight: bold;
    font-size: 24px;
    color: #AFB2BE;
}

.lastBox>span:nth-child(3),
.lastBox>span:nth-child(4) {
    font-size: 20.0025px;
    color: #AFB2BE;
}

.lastBox>img {
    position: absolute;
    top: 30px;
    right: 9.9975px;
    width: 158.0025px;
    height: 104.0025px;
    /* background-color: aqua; */
}

.activeLastBox {
    color: #fff;
    background: linear-gradient(0deg, #678EFE, #9DB4FE);
}

.activeLastBox>span:nth-child(2),
.activeLastBox>span:nth-child(3),
.activeLastBox>span:nth-child(4) {
    color: #fff;
}

.activeLine {
    display: flex;
    box-sizing: border-box;
    padding: 27.9975px 24px 0px 15.9975px;
    width: 100%;
    /* background-color: aqua; */
}

.activeLine:last-child {
    margin-bottom: 60px;
}

.activeLine>.imgBox {
    margin-right: 33.9975px;
    width: 78px;
    height: 78px;
    background: linear-gradient(0deg, #678EFE, #9DB4FE);
    box-shadow: 0px 2.0025px 9px 0px rgba(119, 152, 255, 0.49);
    border-radius: 20.0025px;

}

.imgBox>img {
    width: 78px;
    height: 78px;
}

.rightBox {
    box-sizing: border-box;
    padding-right: 27.9975px;
    padding-bottom: 27.9975px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 27.9975px;
    color: #38465D;
    border-bottom: 2.0025px solid #f2f2f2;

}

.rightBox>div {
    width: 80%;
    display: flex;
    flex-direction: column;
}

.rightBox>div>span:last-child {
    font-size: 26.0025px;
    color: #AFB2BE;
}

.rightBox>div:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 135.9975px;
    height: 48px;
    background: rgba(204, 204, 204, .2);
    border-radius: 24px;
    font-size: 24px;
    color: #AFB2BE;
}

.finishBtn {
    background: linear-gradient(0deg, #678EFE, #9DB4FE) !important;
    box-shadow: 0px 2.0025px 8.0025px 0px rgba(119, 152, 255, 0.18) !important;
    color: #fff !important;
}

.couponBox {
    position: relative;
    margin-top: 44.0025px;
    width: 690px;
    height: 180px;
    background: linear-gradient(-45deg, #FEE3AE, #F9D791);
    border-radius: 20.0025px;
    overflow: hidden;
}

.couponLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 168px;
    height: 30px;

}

.couponRight {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 128.0025px;
    height: 141.9975px;
}

.couponMain {
    box-sizing: border-box;
    padding: 51.9975px 0 0 48px;
    display: flex;
}

.couponMain>div:first-child {
    margin-right: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #837971;
}

.couponMain>div:first-child>div {
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 27.9975px;
    color: #8B511E;
}

.couponMain>div:first-child>div>span {
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 54px;
    color: #8B511E;
}

.couponMain>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 32.0025px;
    color: #333333;
}

.couponMain>div:nth-child(2)>div {
    margin-top: 20.0025px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #666666;
}

.couponMain>div:nth-child(2)>div>span {
    margin-right: 21.9975px;
    padding: 3.9975px 8.0025px;
    border-radius: 6px;
    border: .9975px solid #8B511E;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #8B511E;
}

.ruleBox {
    position: relative;
    box-sizing: border-box;
    padding: 30px 39.9975px 99.9975px;
    width: 100%;
    background: #fff;
    height: 80vh;
    overflow-y: scroll;
}

/* .ruleBox>div:first-child {
    font-size: 36px;
    color: #333333;
    font-weight: bold;
    width: 100%;
    text-align: center;
} */

.ruleMain {
    width: 100%;
    font-size: 32.0025px;
}

.bottomBtnBox {
    padding: 39.9975px 20.0025px;
    box-sizing: border-box;
    position: fixed;
    bottom: 0px;
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* background: aqua; */
}

.bottomBtnBox>div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 69.9975px;
    background: linear-gradient(0deg, #678EFE, #9DB4FE);
    box-shadow: 0px 2.0025px 9px 0px rgba(119, 152, 255, 0.49);
    border-radius: 39.9975px;
    font-size: 27.9975px;
    color: #fff;
    -webkit-border-radius: 39.9975px;
    -moz-border-radius: 39.9975px;
    -ms-border-radius: 39.9975px;
    -o-border-radius: 39.9975px;
}

.bottomBtnBox>div:nth-child(2) {
    width: 40% !important;
    background: #ccc !important;
    box-shadow: 0px 2.0025px 9px 0px rgba(255, 255, 255, 0.49) !important;
}



.header .van-icon {
    color: #333;
    font-size: 40px;
    font-weight: bold;
}

.header .van-nav-bar__text {
    color: #333;
}

.header {
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 88px;
    background-color: #fff;
    // padding-top: 60px;
}

/deep/.van-nav-bar__text,
/deep/.van-nav-bar__left,
/deep/.van-nav-bar .van-icon {
    color: #333;
}
</style>